<template>
  <div class="page_body">
    <!-- <HomeTop :topTitle="topTitle"></HomeTop> -->

    <div class="page_list">
      <div class="page_tab">
        <van-tabs v-model="active" @change="tabgo">
          <van-tab title="教练员" name="1">
            <van-search
              v-model="seachValue"
              @input="search"
              placeholder="请输入搜索关键词"
            />
            <div class="dropdown-menu">
              <van-dropdown-menu>
                <van-dropdown-item
                  v-model="value1"
                  :options="nameoption"
                  @change="nameop()"
                  :title="value1"
                />
                <van-dropdown-item
                  :title="value2"
                  v-model="value2"
                  @change="deoptiom()"
                  :options="gradeoption"
                />
                <!-- <van-dropdown-item
                  @change="region()"
                  v-model="value3"
                  :options="regionoption"
                /> -->
              </van-dropdown-menu>
            </div>
            <div
              class="page_centens"
              v-for="(item, index) in list"
              :key="index"
            >
              <div class="page_centens_one">
                <div
                  class="page_centens_one_imgjia"
                  @click="gols(item.id, '1')"
                >
                  <img class="page_centens_one_img" :src="item.photo" alt="" />
                </div>
                <div
                  class="page_centens_one_centen"
                  @click="gols(item.id, '1')"
                >
                  <div class="page_centens_one_centen_one">
                    <p class="page_centens_one_centen_one_p1">
                      {{ item.name }}
                    </p>
                    <p class="page_centens_one_centen_one_p2">认证有效期内</p>
                    <p class="page_centens_one_centen_one_p3">
                      性别：{{ item.sex }}
                    </p>
                  </div>
                  <div class="page_centens_one_centen_one">
                    <p class="page_centens_one_centen_one_p4">
                      教练员资质：{{
                        item.certificate_info[0].coach_certificate_title
                      }}
                      {{ item.certificate_info[0].coach_certificate_level }}
                    </p>
                  </div>
                  <div class="page_centens_one_centen_one">
                    <p class="page_centens_one_centen_one_p4">
                      证书签发日期：{{
                        item.certificate_info[0].certificate_begin_date
                      }}
                    </p>
                  </div>

                  <div class="page_centens_one_centen_ones"></div>
                </div>
                <div
                  class="page_centens_one_reintjia"
                  v-if="item.certificate_info.length > 1"
                >
                  <img
                    @click="onereint(index)"
                    v-if="item.loading"
                    class="page_centens_one_reint"
                    src="../../assets/image/7c9b49e387129744c56902a7f4967e3.png"
                    alt=""
                  />
                  <img
                    @click="onereints(index)"
                    v-else
                    class="page_centens_one_reint"
                    src="../../assets/image/f8aea850b2ba45ae48f0b1ca18e9a4a.png"
                    alt=""
                  />
                </div>
              </div>

              <div v-show="!item.loading">
                <div
                  v-for="(items, indexs) in item.certificate_info"
                  :key="indexs"
                >
                  <div v-if="indexs > 0">
                    <div class="page_centens_two">
                      <div class="page_centens_two_centen_one">
                        <p class="page_centens_one_centen_one_p5">
                          教练员资质：{{ items.coach_certificate_title }}
                          {{ items.coach_certificate_level }}
                        </p>
                      </div>
                      <div class="page_centens_two_centen_one">
                        <p class="page_centens_one_centen_one_p5">
                          证书签发日期：{{ items.certificate_begin_date }}
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </van-tab>

          <!-- <van-tab title="裁判员" name="2"> -->
          <!-- <van-search
              v-model="seachValue"
              @input="search"
              placeholder="请输入搜索关键词"
            /> -->
          <!-- </van-tab> -->
        </van-tabs>
      </div>
    </div>
  </div>
</template>
  <style src="../../assets/css/searchCenter/search_center.css" scoped></style>
  
  <script>
import HomeTop from "@/components/homeTop.vue";
// import { NavBar } from "vant";
import { Indicator, Toast } from "mint-ui";
import {
  Search,
  Tab,
  Tabs,
  Pagination,
  List,
  Cell,
  NavBar,
  DropdownMenu,
  DropdownItem,
} from "vant";
export default {
  name: "searchCenter",
  components: {
    HomeTop,
    [Search.name]: Search,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Pagination.name]: Pagination,
    [List.name]: List,
    [Cell.name]: Cell,
    [NavBar.name]: NavBar,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
  },
  data() {
    return {
      topTitle: "公示中心",
      seachValue: "",
      active: "1",
      list: [],
      currentPage: 1, //当前页
      page: 10,
      items: 0, //总个数
      loading: true,
      ids: "",
      nameoption: [
        {
          value: "",
          text: "按名称",
        },
      ],
      value1: "", //按名称
      gradeoption: [
        {
          value: "",
          text: "按等级",
        },
      ],
      value2: "", //等级
      regionoption: [
        {
          value: "",
          text: "按地域",
        },
        {
          value: "黄浦区",
          text: "黄浦区",
        },
        {
          value: "徐汇区",
          text: "徐汇区",
        },
        {
          value: "长宁区",
          text: "长宁区",
        },
        {
          value: "静安区",
          text: "静安区",
        },
        {
          value: "普陀区",
          text: "普陀区",
        },
        {
          value: "虹口区",
          text: "虹口区",
        },
        {
          value: "杨浦区",
          text: "杨浦区",
        },
        {
          value: "闵行区",
          text: "闵行区",
        },
        {
          value: "宝山区",
          text: "宝山区",
        },
        {
          value: "嘉定区",
          text: "嘉定区",
        },
        {
          value: "浦东新区",
          text: "浦东新区",
        },
        {
          value: "金山区",
          text: "金山区",
        },
        {
          value: "松江区",
          text: "松江区",
        },
        {
          value: "青浦区",
          text: "青浦区",
        },
        {
          value: "奉贤区",
          text: "奉贤区",
        },
        {
          value: "崇明区",
          text: "崇明区",
        },
      ],
      value3: "", //地域
    };
  },
  mounted() {
    if (this.value1 == "" || this.value2 == "") {
      this.value1 = "按证书";
      this.value2 = "按等级";
    }
    this.onlos();
    this.onLoad();
  },
  methods: {
    //搜索按钮
    search() {
      this.onlos();
    },
    // 数据请求
    onlos() {
      let url = "/mobile/coachCertifiedList";
      let data = {
        keywords: this.seachValue,
        type: this.active,
        coach_certificate_title: this.value1,
        coach_certificate_level: this.value2,
        region: this.value3,
      };
      Indicator.close();
      this.axios
        .post(url, data)
        .then((res) => {
          if (res.code == 0) {
            console.log(res);
            this.list = res.list;

            this.list.forEach((item, indexs) => {
              item.loading = true;
            });
          } else {
            Toast({
              message: res.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          Indicator.close();
          console.log(error);
        });
    },
    onLoad() {
      let url = "/mobile/coachCertificateQuery";
      Indicator.close();
      this.axios
        .post(url)
        .then((res) => {
          if (res.code == 0) {
            console.log(res);
            this.nameoption = res.data;
          } else {
            Toast({
              message: res.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          Indicator.close();
          console.log(error);
        });
    },
    nameop() {
      // this.onLoad();
      this.nameoption.forEach((item) => {
        if (this.value1 == item.value) {
          this.gradeoption = item.level;
        }
      });
      this.onlos();
    },
    deoptiom() {
      let that = this;
      that.onlos();
    },
    region() {
      let that = this;
      that.onlos();
    },
    gols(id, type) {
      this.$router.push({
        name: "searchdetails",
        query: {
          id: id,
          type: type,
          keywords: this.seachValue,
          active: this.active,
          activess: this.activess,
        },
      });
    },
    onereint(index) {
      console.log(index);
      this.list.forEach((item, indexs) => {
        if (index == indexs) {
          item.loading = !item.loading;
        }
      });

      // this.$nextTick();
      this.$forceUpdate();
    },
    onereints(index) {
      this.list.forEach((item, indexs) => {
        if (index == indexs) {
          item.loading = !item.loading;
        }
      });
      this.$forceUpdate();
    },

    tabgo(name) {
      this.seachValue = "";
      this.activess = "0";

      console.log("数据", name);
    },
  },
};
</script>
  